<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="content">
      <u-tabs :list="list" @click="onClick"></u-tabs>
      <view class="form" v-if="type === '登录'">
        <u--form
            labelPosition="left"
            :model="loginModel"
            ref="loginForm"
        >
          <u-form-item
              label="用户名"
              prop="loginModel.username"
              borderBottom
              ref="username"
              labelWidth="100"
          >
            <u--input
                v-model="loginModel.username"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="密码"
              prop="loginModel.password"
              borderBottom
              ref="password"
              labelWidth="100"
          >
            <u--input
                type="password"
                v-model="loginModel.password"
            ></u--input>
          </u-form-item>
        </u--form>
      </view>
      <view class="form" v-else>
        <u--form
            labelPosition="left"
            :model="regModel"
            ref="regForm"
        >
          <u-form-item
              label="用户名"
              prop="regModel.username"
              borderBottom
              ref="username"
              labelWidth="120"
          >
            <u--input
                v-model="regModel.username"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="密码"
              prop="regModel.password"
              borderBottom
              ref="password"
              labelWidth="120"
          >
            <u--input
                type="password"
                v-model="regModel.password"
            ></u--input>
          </u-form-item>
          <u-form-item
              label="确认密码"
              prop="regModel.checkPassword"
              borderBottom
              ref="checkPassword"
              labelWidth="120"
          >
            <u--input
                type="password"
                v-model="regModel.checkPassword"
            ></u--input>
          </u-form-item>
        </u--form>
      </view>
      <view class="button-item">
        <u-button type="primary" :text="type" @click="loginOrReg"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import type {LoginReqVO, RegisterRegVO} from "@/interfaces/user";
import {useLoginApi, useRegisterApi} from "@/services/api";
import {useStore} from "vuex";

const uToastRef = ref()
const store = useStore()
const type = ref<string>('登录')
const list = ref<{name:string}[]>([
  {
    name:'登录'
  },
  {
    name:'注册'
  }
])
const loginModel = ref<LoginReqVO>({
  password: "",
  username: ""
})
const regModel = ref<RegisterRegVO>({
  checkPassword: "",
  password: "",
  username: ""
})
const onClick = ({name}:{name:string}) => {
  type.value = name
}
const loginOrReg = async ()=>{
  if (type.value === '登录'){
    const {data:res} = await useLoginApi(loginModel.value)
    if (!res || !res.target){
      await store.dispatch('auth/setIsLogin',true)
      await store.dispatch('auth/setToken',res.token)
      await store.dispatch('auth/setUserId', res.id)
      await store.dispatch('auth/setUsername',res.username)
      await store.dispatch('auth/setAvatar',res.avatar)
      uToastRef.value.show({
        message:'登录成功',
        type:'success',
        complete:()=>{
          uni.switchTab({
            url:'/pages/index/index'
          })
        }
      })
    }
  }else {
    if(!uni.$u.test.enOrNum(regModel.value.username)|| regModel.value.password !== regModel.value.checkPassword){
      return
    }
    const {data:res} = await useRegisterApi(regModel.value)
    uToastRef.value.show({
      message:'注册成功',
      type:'success',
      complete:()=>{
        regModel.value = {
          username:'',
          password:'',
          checkPassword:''
        }
        type.value = '登录'
      }
    })
  }
}
</script>


<style scoped lang="scss">
.container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .content{
    background-color: rgba(44, 64, 90, 0.5);
    border-radius: 12px;
    width: 70%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    .button-item{
      width: 65%;
    }
  }
}
</style>
